<template>
  <up-popup v-model:show="show" mode="bottom" :round="20" :closeable="true" @close="handleClose">
    <view class="customer-service-detail-modal">
      <view class="modal-header">
        <text class="title">客服详细信息</text>
      </view>
      
      <view class="customer-service-info">
        <view class="info-section">
          <view class="section-title">基本信息</view>
          <view class="info-item">
            <text class="label">姓名：</text>
            <text class="value">{{ customerServiceInfo?.name }}</text>
          </view>
          <view class="info-item">
            <text class="label">手机号：</text>
            <text class="value phone">{{ customerServiceInfo?.phone }}</text>
          </view>
          <view class="info-item">
            <text class="label">工作状态：</text>
            <view class="status-badge" :class="{ 'online': customerServiceInfo?.isOnline, 'offline': !customerServiceInfo?.isOnline }">
              {{ customerServiceInfo?.isOnline ? '在线' : '离线' }}
            </view>
          </view>
          <view class="info-item">
            <text class="label">工作时间：</text>
            <text class="value">{{ customerServiceInfo?.workTime }}</text>
          </view>
        </view>
        
        <view class="info-section">
          <view class="section-title">管理停车场</view>
          <view class="parking-lots">
            <view 
              v-for="(lot, index) in customerServiceInfo?.parkingLots" 
              :key="index" 
              class="parking-lot-tag"
            >
              {{ lot }}
            </view>
          </view>
        </view>
        
        <view class="info-section">
          <view class="section-title">工作统计</view>
          <view class="stats-grid">
            <view class="stat-item">
              <text class="stat-value">{{ customerServiceInfo?.todayTickets }}</text>
              <text class="stat-label">今日处理工单</text>
            </view>
            <view class="stat-item">
              <text class="stat-value">{{ customerServiceInfo?.weekTickets || 85 }}</text>
              <text class="stat-label">本周处理工单</text>
            </view>
            <view class="stat-item">
              <text class="stat-value">{{ customerServiceInfo?.monthTickets || 320 }}</text>
              <text class="stat-label">本月处理工单</text>
            </view>
            <view class="stat-item">
              <text class="stat-value">{{ customerServiceInfo?.satisfaction || '98%' }}</text>
              <text class="stat-label">满意度</text>
            </view>
          </view>
        </view>
        
        <view class="info-section">
          <view class="section-title">最近处理记录</view>
          <view class="recent-records">
            <view class="record-item" v-for="(record, index) in recentRecords" :key="index">
              <view class="record-time">{{ record.time }}</view>
              <view class="record-content">{{ record.content }}</view>
              <view class="record-status" :class="record.status">{{ record.statusText }}</view>
            </view>
          </view>
        </view>
      </view>
      
      <view class="modal-footer">
        <up-button type="primary" @click="handleContact">联系客服</up-button>
        <up-button type="default" @click="handleClose">关闭</up-button>
      </view>
    </view>
  </up-popup>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';

interface CustomerServiceInfo {
  id: number;
  name: string;
  phone: string;
  parkingLots: string[];
  isOnline: boolean;
  workTime: string;
  todayTickets: number;
  weekTickets?: number;
  monthTickets?: number;
  satisfaction?: string;
}

interface Props {
  show: boolean;
  customerServiceInfo: CustomerServiceInfo | null;
}

interface Emits {
  (e: 'update:show', value: boolean): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const show = computed({
  get: () => props.show,
  set: (value) => emit('update:show', value)
});

// 最近处理记录模拟数据
const recentRecords = ref([
  {
    time: '2023-12-01 14:30',
    content: '处理停车费用争议工单',
    status: 'completed',
    statusText: '已完成'
  },
  {
    time: '2023-12-01 13:15',
    content: '协助用户解决支付问题',
    status: 'completed',
    statusText: '已完成'
  },
  {
    time: '2023-12-01 11:45',
    content: '处理车位预约咨询',
    status: 'processing',
    statusText: '处理中'
  },
  {
    time: '2023-12-01 10:20',
    content: '解答停车场收费标准',
    status: 'completed',
    statusText: '已完成'
  }
]);

// 联系客服
const handleContact = () => {
  if (props.customerServiceInfo?.phone) {
    uni.makePhoneCall({
      phoneNumber: props.customerServiceInfo.phone,
      success: () => {
        console.log('拨打电话成功');
      },
      fail: (err) => {
        console.error('拨打电话失败:', err);
        uni.showToast({
          title: '拨打电话失败',
          icon: 'none'
        });
      }
    });
  }
};

// 关闭弹窗
const handleClose = () => {
  show.value = false;
};
</script>

<style scoped lang="scss">
.customer-service-detail-modal {
  padding: 40rpx;
  background: #fff;
  border-radius: 20rpx 20rpx 0 0;
  max-height: 80vh;
  overflow-y: auto;
  
  .modal-header {
    text-align: center;
    margin-bottom: 30rpx;
    
    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .customer-service-info {
    .info-section {
      margin-bottom: 30rpx;
      
      .section-title {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 20rpx;
        padding-bottom: 10rpx;
        border-bottom: 2px solid #f0f0f0;
      }
      
      .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .label {
          font-size: 26rpx;
          color: #666;
          flex-shrink: 0;
        }
        
        .value {
          font-size: 26rpx;
          color: #333;
          font-weight: 500;
          
          &.phone {
            color: #1890ff;
          }
        }
        
        .status-badge {
          padding: 4rpx 12rpx;
          border-radius: 12rpx;
          font-size: 22rpx;
          color: #fff;
          
          &.online {
            background: #52c41a;
          }
          
          &.offline {
            background: #d9d9d9;
            color: #666;
          }
        }
      }
      
      .parking-lots {
        display: flex;
        flex-wrap: wrap;
        gap: 12rpx;
        
        .parking-lot-tag {
          padding: 8rpx 16rpx;
          background: #f0f7ff;
          color: #1890ff;
          border-radius: 20rpx;
          font-size: 24rpx;
          border: 1px solid #d6e4ff;
        }
      }
      
      .stats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20rpx;
        
        .stat-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 20rpx;
          background: #fafafa;
          border-radius: 12rpx;
          
          .stat-value {
            font-size: 32rpx;
            font-weight: bold;
            color: #1890ff;
            margin-bottom: 8rpx;
          }
          
          .stat-label {
            font-size: 22rpx;
            color: #666;
          }
        }
      }
      
      .recent-records {
        .record-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 16rpx 0;
          border-bottom: 1px solid #f0f0f0;
          
          &:last-child {
            border-bottom: none;
          }
          
          .record-time {
            font-size: 22rpx;
            color: #999;
            flex-shrink: 0;
            width: 120rpx;
          }
          
          .record-content {
            font-size: 24rpx;
            color: #333;
            flex: 1;
            margin: 0 20rpx;
          }
          
          .record-status {
            font-size: 22rpx;
            padding: 4rpx 8rpx;
            border-radius: 8rpx;
            
            &.completed {
              background: #f6ffed;
              color: #52c41a;
            }
            
            &.processing {
              background: #fff7e6;
              color: #fa8c16;
            }
          }
        }
      }
    }
  }
  
  .modal-footer {
    display: flex;
    gap: 20rpx;
    margin-top: 30rpx;
    
    .u-button {
      flex: 1;
      border-radius: 12rpx;
    }
  }
}
</style>